<!--服务信息-营业网点服务人员信息-->
<template>
  <div class="personnelInfo-box">
    <PageTitle class="boxTitle" :text="title"></PageTitle>
    <div class="con-box tips">
      <!-- <div class="warning-tit title">充值不成功怎么办？</div>
      <h3>一、常见错误代码及解决办法如下</h3> -->
      <tui-table class="errorTable">
        <tui-tr>
          <tui-td bold v-for="(item,index) in errorHeader" :key="index" :span="9">{{item.title}}</tui-td>
        </tui-tr>
        <tui-tr v-for="(item, index) in errorListData" :key="index">
          <tui-td v-for="(obj, idx) in errorHeader" :key="idx">{{item[obj.key]}}</tui-td>
        </tui-tr>
      </tui-table>
      <b class="b">以上人员上级名单为陈晨、付曦。投诉举报方式023-95007或服务监督热线：023-67583599。</b>
    </div>
    <FooterTel></FooterTel>
  </div>
</template>

<script>
import PageTitle from '../../components/pageTitle.vue'
import FooterTel from '../../components/footerTel.vue'
export default {
  name: 'Detail',
  components: {
    PageTitle,
    FooterTel
  },
  data () {
    return {
      title: null,
      //常见错误代码及解决办法
      errorHeader: [{
        title: '序号',
        key: 'index',
        width: '20px'
      }, {
        title: '职位',
        key: 'level'
      }, {
        title: '姓名',
        key: 'name'
      }, {
        title: '工号',
        key: 'num'
      }],
      errorListData: [{
        index: 1,
        level: '营业代表',
        name: '韦金珩',
        num: '258'
      }, {
        index: 2,
        level: '营业代表',
        name: '刘前宏',
        num: '129'
      }, {
        index: 3,
        level: '营业代表',
        name: '唐琳',
        num: '161'
      }, {
        index: 4,
        level: '营业代表',
        name: '秦晚秋',
        num: '150'
      }, {
        index: 5,
        level: '营业代表',
        name: '李楠',
        num: '188'
      }, {
        index: 6,
        level: '营业代表',
        name: '甘琳',
        num: '167'
      }, {
        index: 7,
        level: '营业代表',
        name: '石佳丽',
        num: '33'
      }, {
        index: 8,
        level: '营业代表',
        name: '党晓雷',
        num: '67'
      }, {
        index: 9,
        level: '营业代表',
        name: '张立',
        num: '15'
      }, {
        index: 10,
        level: '营业代表',
        name: '潘雪梅',
        num: '29'
      }, {
        index: 11,
        level: '营业代表',
        name: '杨雪梅',
        num: '172'
      }, {
        index: 12,
        level: '营业代表',
        name: '廖海燕',
        num: '38'
      }, {
        index: 13,
        level: '营业代表',
        name: '童谣',
        num: '31'
      }, {
        index: 14,
        level: '营业代表',
        name: '何昕',
        num: '87'
      }, {
        index: 15,
        level: '营业代表',
        name: '邓榆',
        num: '137'
      }],
    };
  },
  async onShow () {

  },
  async onLoad (e) {
    var vm = this;
    vm.title = e.title
  },
  created () {
  },
  methods: {
    previewImage (i, list) {
      this.func.previewImg(i, list)
    }
  },
  mounted () {
    var vm = this;
  },
};
</script>

<style lang="scss" scoped>
@import "../../../static/css/module.scss";
.personnelInfo-box {
  padding-bottom: 20px;
  .boxTitle {
    margin: 10px 14px;
  }
  .gasStopCon {
    padding: 18px 20px;
    margin: 14px;
    font-size: 15px;
    line-height: 26px;
  }
  // __________________________
  .detailContent,
  .tips {
    padding: 20px 18px 20px;
    margin: 14px;
    font-size: 15px;
    line-height: 22px;
    overflow: hidden;
    .title {
      width: 100%;
      height: 30px;
      padding-left: 14px;
      line-height: 30px;
      font-size: 17px;
      font-weight: bold;
      color: #222;
      box-sizing: border-box;
      margin: 10px 0;
    }
    .imgContent {
      width: auto;
      img {
        width: 100%;
      }
    }
  }
  // ____________________________
  // .errorTable {
  // .tui-table__row {
  // .tui-table__middle:nth-of-type(1) {
  //   width: 25% !important;
  // }
  //   .tui-table__middle:nth-of-type(2) {
  //     width: 25% !important;
  //   }
  //   .tui-table__middle:nth-of-type(3) {
  //     width: 60% !important;
  //   }
  //   .tui-table__middle:nth-of-type(3) {
  //     width: 60% !important;
  //   }
  // }
  // }
  .problemTable {
    .tui-table__row {
      .tui-table__middle:nth-of-type(1) {
        width: 30% !important;
      }
      .tui-table__middle:nth-of-type(2) {
        width: 70% !important;
      }
    }
  }
  .anomalyTable {
    border-top: 1px solid rgb(234, 238, 245);
    border-left: 1px solid rgb(234, 238, 245);
    border-collapse: collapse; /*设置单元格的边框合并为1*/
    th,
    td {
      border-bottom: 1px solid rgb(234, 238, 245);
      border-right: 1px solid rgb(234, 238, 245);
    }
    td {
      padding: 0 6px;
    }
    tr:first-child {
      color: rgb(51, 51, 51);
      th:nth-of-type(1) {
        width: 12%;
      }
    }
  }
}
</style>
